$(function(){
	//标记当前图片索引
	var index=0;
	var clear;
	//自动切换
	chongqi();
	function chongqi(){
		clear=setInterval(function(){
			if(index==$(".box-img").length-1){
				index=0;
				// 前一张图片隐藏
				$(".box-img").css("opacity","0");
				//后一张图片显示
				$(".box-img").eq(index).css("opacity","1");
				//改变按钮颜色
				$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
				$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
			}else{
				index++;
				// 前一张图片隐藏
				$(".box-img").css("opacity","0");
				//后一张图片显示
				$(".box-img").eq(index).css("opacity","1");
				//改变按钮颜色
				$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
				$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
			}	
		},3000);
	}
	
	//点击左右按钮切换
	$(".box-left").click(function(){
		console.log("左按钮点击");
		clearInterval(clear);
		if(index==0){
			index=$(".box-img").length-1;
			$(".box-img").css("opacity","0");
			$(".box-img").eq(index).css("opacity","1");
			//改变按钮颜色
			$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
			$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
			chongqi();
		}else{
			index--;
			$(".box-img").css("opacity","0");
			$(".box-img").eq(index).css("opacity","1");
			//改变按钮颜色
			$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
			$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
			chongqi();
		}
	});
	$(".box-right").click(function(){
		console.log("右按钮点击");
		clearInterval(clear);
		if(index==$(".box-img").length-1){
			index=0;
			// 前一张图片隐藏
			$(".box-img").css("opacity","0");
			//后一张图片显示
			$(".box-img").eq(index).css("opacity","1");
			//改变按钮颜色
			$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
			$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
			chongqi();
		}else{
			index++;
			// 前一张图片隐藏
			$(".box-img").css("opacity","0");
			//后一张图片显示
			$(".box-img").eq(index).css("opacity","1");
			//改变按钮颜色
			$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
			$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
			chongqi();
		}
	});
	//通过几个按钮的形式来
	$(".box-zhiding>ul>li").click(function(){
		clearInterval(clear);
		//取得按钮的索引
		var indexx=$(this).index();
		console.log("按钮"+(indexx+1)+"点击");
		//将当前点击的按钮索引复制给图片索引，显示出相应的图片
		index=indexx;
		$(".box-img").css("opacity","0");
		$(".box-img").eq(index).css("opacity","1");
		//改变按钮颜色
		$(".box-zhiding>ul>li").css("backgroundColor","#ccc");
		$(".box-zhiding>ul>li").eq(index).css("backgroundColor","white");
		chongqi();
	});
});